<!--报价弹框-->
<template>
    <el-dialog
        :title="'报价信息'"
        width="590px"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        custom-class="dialog-form"
        @close="handleClose">
        <div class="cp-dialog-body" style="height: 275px; overflow-y: auto">
            <el-form ref="form" label-width="100px" class="specs-form" :model="form" :rules="rules">
                <el-form-item :label="labelTxt" prop="bidSchemeDescription">
                    <el-input
                        v-model.trim="form.bidSchemeDescription"
                        class="ct-wd-360"
                        type="textarea"
                        :rows="8"
                        maxlength="200"
                        show-word-limit
                        placeholder="请输入信息">
                    </el-input>
                </el-form-item>
                <el-form-item label="预计工期" prop="estimatedConstrPeriod" v-if="info.supplyDemandType==='CAPABILITY_SERVICE'">
                    <el-input placeholder="请输入" v-model.trim="form.estimatedConstrPeriod">
                        <span slot="suffix" style="padding-right: 10px;">天</span>
                    </el-input>
                </el-form-item>
                <el-form-item label="报价" prop="bidOffer">
                    <el-input placeholder="请输入" v-model.trim="form.bidOffer">
                        <span slot="suffix" style="padding-right: 10px;">元</span>
                    </el-input>
                </el-form-item>
                <el-form-item label="资料上传">
                    <oss-upload-file
                        :original-file-list="bidResourcesStr"
                        :oss-limit="1"
                        :oss-file-size="10"
                        oss-value="bidResourcesStr"
                        :oss-target="`qiao/d/${info.id}/file`"
                        @handleChangeFile="handleChangeFile"
                        @deleteFileCallback="deleteFileCallback">
                    </oss-upload-file>
                    <p class="ct-input-info" style="color: #999">
                        支持格式：各类常规文档及图片格式
                    </p>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="isDisabled" @click="handleSubmit">立即报价</el-button>
        </span>
    </el-dialog>
</template>
<script lang="ts">
import {Vue, Watch, Prop, Emit, Component} from 'nuxt-property-decorator'
import {bidOffer} from '~/api/demand/bidding'
import ossUploadFile from '~/components/modules/ossUploadFile.vue'
@Component({
    name: 'bidding',
    components: {
        ossUploadFile
    }
})
export default class Bidding extends Vue {
    @Prop({
        default: () => {
            return {
                supplyDemandType: 'EQUIPMENT_LEASING',
                shopTitle: '设备租赁',
                id: '30'
            }
        }
    }) info!: any
    @Prop({
        default: false
    }) bidDialogShow!: boolean
    form: any = {
        demandNeedsId: '',
        supplyDemandType: '', // 三大类服务
        bidSchemeDescription: '', // 方案描述、设备信息
        bidOffer: '', // 报价
        estimatedConstrPeriod: '', // 预计工期
        bidResourcesStr: [], // 投标资料json数组集合
        bidResourcesStrNum: '',
        modifyUserId: '',
        createUserId: ''
    }
    bidResourcesStr: any = []
    validateFormNumber = (rule: any, value: any, callback: any) => {
        this.validateNumber(rule, value, callback)
    }
    rules: object = {
        bidSchemeDescription: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        bidOffer: [
            {required: true, message: '请输入', trigger: 'blur'},
            {validator: this.validateFormNumber, trigger: 'blur'}
        ],
        estimatedConstrPeriod: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        bidResourcesStrNum: [
            {required: true, message: '请上传', trigger: 'blur'}
        ]
    }
    labelTxt: string = ''
    dialogVisible: boolean = false
    isDisabled: boolean = false
    mounted () {
        this.initClassify()
    }
    handleSubmit () {
        (this.$refs.form as any).validate((valid: any) => {
            if (valid) {
                this.isDisabled = true
                const form:any = {...this.form}
                form.supplyDemandType = this.info.supplyDemandType
                form.createUserId = this.$store.state.userinfo.id
                form.demandNeedsId = this.info.id
                delete form.bidResourcesStrNum
                form.bidResourcesStr = JSON.stringify(form.bidResourcesStr)
                const submitAjax = async (fn: any) => {
                    const {data} = await fn(form)
                    if (data.code >= 0) {
                        this.$message.success(data.msg)
                        this.dialogVisible = false
                        this.handleClose()
                        this.isDisabled = false
                    } else {
                        this.$message.error(data.msg)
                    }
                }
                submitAjax(bidOffer)
                console.log(this.form)
            } else {
                console.log('error submit!!')
                return false
            }
        })
    }
    handleClose () {
        this.$emit('dialogCallback', false)
    }
    initClassify () {
        switch (this.info.supplyDemandType) {
            case 'CAPABILITY_SERVICE':
                this.labelTxt = '方案描述'
                break
            case 'EQUIPMENT_LEASING':
                this.labelTxt = '设备信息'
                break
            case 'LABOR_FORCE':
                this.labelTxt = '劳动力信息'
                break
            case 'OTHER_SERVICE':
                this.labelTxt = '其他服务'
                break
        }
    }
    handleChangeFile (json: any) {
        this.form[json.filevalue] = [json.data]
        this.form[json.filevalue + 'Num'] = json.num > 0 ? json.num.toString() : ''
        this.validateFieldInput(json.filevalue + 'Num')
    }
    validateFieldInput (key:any) {
        try {
            (this.$refs.form as any).validateField(key)
        } catch (e) {
            console.log('validateFieldInput [ validateField ] with valid prop string!')
        }
    }
    deleteFileCallback (json: any) {
        const del = this.form.delIds ? this.form.delIds.split(',') : []
        del.push(json.id)
        this.form.delIds = del.join(',')
    }
    validateNumber (rule: any, value: any, callback: any) {
        if (isNaN(Number(value)) || Number(value) <= 0) {
            callback(new Error('请输入大于0的数字'))
        } else if (parseInt(value).toString().length > 13) {
            callback(new Error('长度不得大于13位'))
        } else {
            callback()
        }
    }
    @Watch('bidDialogShow', {immediate: true, deep: true})
    getBidDialogShow (nv: boolean) {
        this.dialogVisible = nv
    }
}
</script>
<style lang="scss" scoped>
</style>
